import React, { lazy, Suspense } from 'react'
import { Loading } from 'react-vant';
<<<<<<< HEAD
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
let Shou = lazy(() => import('./Neighborhood_hby/Shou/Shop_page'))
let SecondHand = lazy(() => import('./Neighborhood_hby/Second-hand/SecondHand'))
=======
import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom'
let Shou = lazy(() => import('./Neighborhood_hby/Shou/Shop_page'))
let SecondHand = lazy(() => import('./Neighborhood_hby/Second-hand/SecondHand'))
let Mypage = lazy(() => import('./Neighborhood_hby/Mypage/Mypage'))
let Add_SecondHand=lazy(() => import('./Neighborhood_hby/Second-hand/add_hand/Add_hand'))
let Second_Info=lazy(()=>import('./Neighborhood_hby/Second-hand/second_one/Second_info'))
import { AnimatePresence, motion } from 'framer-motion'
>>>>>>> 68cd53bc9756b103f9f9d7c1233b7d2794e053c6
import './App.css'
export default function App() {
	const location = useLocation();
	return (
		<div>
			<Suspense fallback={<div className='wode'><Loading type="spinner" color="#3f45ff" /></div>}>
				<AnimatePresence mode='wait'>
					<Routes location={location} key={location.pathname}>
						<Route path='/' element={
							<motion.div
								initial={{ opacity: 0, x: -100 }}  // 从左侧进入
								animate={{ opacity: 1, x: 0 }}      // 进入
								exit={{ opacity: 0, x: 100 }}        // 从右侧退出
								transition={{ duration: 0.5 }}
							>
								<Shou></Shou>
							</motion.div>
						} exact></Route>
						<Route path='/shouPage' element={
							<motion.div
								initial={{ opacity: 0, x: -100 }}  // 从左侧进入
								animate={{ opacity: 1, x: 0 }}      // 进入
								exit={{ opacity: 0, x: 100 }}        // 从右侧退出
								transition={{ duration: 0.5 }}
							>
								<Shou></Shou>
							</motion.div>
						}></Route>
						<Route path='/secondHand' element={
							<motion.div
								initial={{ opacity: 0, x: -100 }}  // 从左侧进入
								animate={{ opacity: 1, x: 0 }}      // 进入
								exit={{ opacity: 0, x: 100 }}        // 从右侧退出
								transition={{ duration: 0.5 }}
							>
								<SecondHand></SecondHand>
							</motion.div>
						}></Route>
						<Route path='/add_secondHand' element={
							<motion.div
								initial={{ opacity: 0, x: -100 }}  // 从左侧进入
								animate={{ opacity: 1, x: 0 }}      // 进入
								exit={{ opacity: 0, x: 100 }}        // 从右侧退出
								transition={{ duration: 0.5 }}
							>
								<Add_SecondHand></Add_SecondHand>
							</motion.div>
						}></Route>
						<Route path='/second_info' element={
							<motion.div
								initial={{ opacity: 0, x: -100 }}  // 从左侧进入
								animate={{ opacity: 1, x: 0 }}      // 进入
								exit={{ opacity: 0, x: 100 }}        // 从右侧退出
								transition={{ duration: 0.5 }}
							>
								<Second_Info></Second_Info>
							</motion.div>
						}></Route>
						<Route path='/mypage' element={
							<motion.div
								initial={{ opacity: 0, x: -100 }}  // 从左侧进入
								animate={{ opacity: 1, x: 0 }}      // 进入
								exit={{ opacity: 0, x: 100 }}        // 从右侧退出
								transition={{ duration: 0.5 }}
							>
								<Mypage></Mypage>
							</motion.div>
						}></Route>
					</Routes>
				</AnimatePresence>
			</Suspense>
		</div>
	)
}
